<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />

    <div class="flex">
      <!-- 左侧 -->
      <div style="width: 100rem" class="mt24">
        <el-card shadow="never" :body-style="{ padding: '20px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">选择型体</span>
          </div>
          <Table :tableHeader="tableHeader" :tableData="tableData" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">全码用量资料</span>
          </div>
          <Table :tableHeader="tableHeader2" :tableData="tableData2" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">型体配色备注</span>
          </div>
          <el-input class="mt10" v-model="textarea" :autosize="{ minRows: 6 }" type="textarea" placeholder="" />
        </el-card>
      </div>

      <div class="mt24 ml20" style="width: 620rem">
        <el-card shadow="never" :body-style="{ padding: '20px 20px 0px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">型体颜色材料输入</span>
          </div>
          <Table :tableHeader="tableHeader3" :tableData="tableData3" selection class="mt15" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
          <div slot="header" class="f16">
            <span style="font-weight: 600">贴合子材料明细</span>
          </div>
          <Table :tableHeader="tableHeader4" :tableData="tableData3" class="mt15" />

          <!-- 分页器 -->
          <div class="bottom">
            <span class="total">共{{ total }}项数据</span>
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[20, 40, 60]"
              layout="sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />

            <div class="btns">
              <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
              <el-button type="primary" size="default" @click="">打印</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'RdUsageQuery'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '型体',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      }
    ]
  },
  {
    type: 'input',
    inputValue: '',
    inputPlaceholder: '颜色名称'
  },
  {
    type: 'input',
    inputValue: '',
    inputPlaceholder: '颜色代号'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '退出'
  },
  {
    type: 'button',
    checkboxLabel: '导出BOM表'
  }
])

// 左侧表格数据
const tableHeader = ref([
  {
    label: '型体',
    prop: 'date'
  },
  {
    type: 'img',
    label: '图片',
    fixed: true,
    prop: 'date'
  }
])
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
const tableHeader2 = ref([
  {
    label: '颜色',
    prop: 'date'
  },
  {
    label: '颜色代号',
    prop: 'date'
  }
])
const textarea = ref('')
// 中间表格数据
const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'date'
  },
  {
    label: '部位',
    prop: 'date'
  },
  {
    label: '分段',
    prop: 'date'
  },
  {
    label: '物料编码',
    prop: 'date'
  },
  {
    label: '材料颜色',
    prop: 'date'
  },
  {
    label: '材料名称',
    prop: 'date'
  },
  {
    label: '规格',
    prop: 'date'
  },
  {
    label: '单位',
    prop: 'date'
  },
  {
    label: '分类',
    prop: 'date'
  },
  {
    label: '供应商',
    prop: 'date'
  },
  {
    label: '尺码起',
    prop: 'date'
  },
  {
    label: '尺码止',
    prop: 'date'
  },
  {
    label: '用量',
    prop: 'date'
  },
  {
    type: 'select',
    label: '计算方式',
    prop: 'date'
  },
  {
    type: 'select',
    label: '领用单位',
    prop: 'date'
  },
  {
    type: 'select',
    label: '号码类型',
    prop: 'date'
  },
  {
    type: 'select',
    label: '主辅料',
    prop: 'date'
  },
  {
    label: '备注',
    prop: 'date'
  },
  {
    type: 'checkbox',
    label: '捡料',
    prop: 'date'
  }
])
const tableHeader4 = ref([
  {
    label: '物料编码',
    prop: 'date'
  },
  {
    label: '材料颜色',
    prop: 'date'
  },
  {
    label: '材料名称',
    prop: 'date'
  },
  {
    label: '材料名称',
    prop: 'date'
  },
  {
    label: '规格',
    prop: 'date'
  },
  {
    label: '单位',
    prop: 'date'
  },
  {
    label: '加工方式',
    prop: 'date'
  },
  {
    label: '供应商',
    prop: 'date'
  },
  {
    label: '比例',
    prop: 'date'
  },
  {
    type: 'checkbox',
    label: '是否清购',
    prop: 'date'
  }
])
const tableData2 = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
    // djsal:<el-dropdown><span class="el-dropdown-link"> Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
    // djsal:<el-dropdown><span class="el-dropdown-link"> Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
  }
]

const tableData3 = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

// 分页
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
<style lang="less" scoped>
.btns {
  display: flex;
  justify-content: space-between;

  .bg {
    background-color: #e7e7e7;
    border: 1px solid #e7e7e7;
    color: #000000;
  }
}

// 底部
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;

  .total {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
  }

  :deep(.el-input__wrapper) {
    padding: 0;
  }

  :deep(.el-input__suffix) {
    transform: translateX(-9px);
  }

  :deep(.el-pagination .el-select .el-input) {
    width: 88px;
  }

  :deep(.number) {
    border: 1px solid #dcdcdc;
    margin-right: 8px;
    border-radius: 3px 3px 3px 3px;
  }

  :deep(.is-active.number) {
    background-color: #f89027 !important;
    color: white;
    border-radius: 3px 3px 3px 3px;
  }

  .save {
    color: black;
    border: 1px solid #e7e7e7;
    background: #e7e7e7;
  }
}
</style>
